<template>
	<view class="container">
		<div class="cancle">
			<span @click="toBack">×</span>
			<span class="middle">登录/注册</span>
		</div>
		<div class="loginForm">
			<u-form :model="form" ref="uForm">
				<u-form-item prop="phone"><u-input v-model="form.phone" :focus="form.focus" placeholder="请输入手机号码 (新手机号自动注册)"/></u-form-item>
				<u-form-item prop="code">
					<u-input v-model="form.code" placeholder="请输入验证码" :focus="form.focus"/>
					<u-button slot="right" type="success" shape="circle" @click="getCode">获取验证码</u-button>
				</u-form-item>
				<u-form-item>
					<radio style="transform:scale(0.5)" :checked="form.checked" @click="form.checked=!form.checked"></radio>
					<span style="color: #8F8F94;">我已认真阅读并同意叮咚买菜&nbsp;<span style="color: #18B566;">《服务协议》，《隐私政策》</span></span>
				</u-form-item>
				<u-button type="success" shape="circle" @click="form.focus=true">登录</u-button>
			</u-form>
			<span class="errorCode">收不到验证码？</span>
		</div>
		<div class="elseLogin">
			<div class="textLine">
				<div class="line"></div>
				<span class="loginText">其他登录方式</span>
				<div class="line"></div>
			</div>
			<div class="loginType">
				<div class="loginItem">
					<u-icon name="weixin-circle-fill" size="80" color="#19BE6B"></u-icon>
					<span class="loginText">微信登录</span>
				</div>
				<div class="loginItem">
					<u-icon name="checkmark-circle" size="80" color="#dc4c32"></u-icon>
					<span class="loginText">一键登录</span>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					phone:"",
					code:"",
					checked:false,
					focus:false
				},
				rules: {
					phone: [
						{ 
							required: true, 
							message: '请输入手机号', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						},
						{
							pattern:/^1[0-9]{10}$/,
							message: '手机号码格式不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					code: [
						{
							required: true,
							message: '请输入验证码', 
							trigger: ['change','blur'],
						}
					],
				}
			}
		},
		methods: {
			toBack(){
				uni.navigateBack({
				    delta: 1
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
.container{
	width: 100%;
	padding: 50rpx 30rpx 0;
	box-sizing: border-box;
	.cancle{
		display: flex;
		align-items: center;
		margin-bottom: 100rpx;
		span{
			font-size: 60rpx;
		}
		.middle{
			font-size: 36rpx;
			margin-left: 230rpx;
		}
	}
	.loginForm{
		margin: 0 30rpx;
	}
	.errorCode{
		float: right;
		font-size: 28rpx;
		color: #19BE6B;
		margin-top: 30rpx;
	}
	.elseLogin{
		margin-top: 300rpx;	
		.textLine{
			display: flex;
			align-items: center;
			.line{
				flex: 1;
				height: 1rpx;
				background-color: #C0C0C0;
			}
			.loginText{
				font-size: 28rpx;
				color: #8F8F94;
			}
		}
		.loginType{
			display: flex;
			margin-top: 50rpx;
			justify-content: space-around;
			.loginItem{
				display: flex;
				flex-direction: column;
				align-items: center;
				.loginText{
					font-size: 28rpx;
					color: #8F8F94;
				}
			}
		}
	}
}
</style>
